﻿<phone:PhoneApplicationPage xmlns:my="clr-namespace:Microsoft.Advertising.Mobile.UI;assembly=Microsoft.Advertising.Mobile.UI"  
    x:Class="BasharLulu.QuranBookmark.WP7.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"                        
    xmlns:converters="clr-namespace:BasharLulu.QuranBookmark.WP7"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800" 
    d:DataContext="{d:DesignData SampleData/SuraMainViewModelSampleData.xaml}"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False">
    <phone:PhoneApplicationPage.Resources>
        <converters:StringFormatConverter x:Key="stringConverter" />
        <converters:SuraEnglishNameConverter x:Key="suraConverterE" />
        <converters:SuraArabicNameConverter x:Key="suraConverterA" />
    </phone:PhoneApplicationPage.Resources>
    
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <!--Panorama control-->
        <controls:Panorama Title="quran bookmark">
            <controls:Panorama.Background>
                <ImageBrush ImageSource="QuranPanoramaBackground.png"/>
            </controls:Panorama.Background>

            <controls:PanoramaItem Header="current">
                <StackPanel>
                    <TextBlock Text="Current bookmark is at:" Margin="10,0,0,0"/>
                    <Border BorderBrush="Yellow" BorderThickness="4" Margin="15,10">
                        <TextBlock Name="CurrentSuraArabicName" Text="Al-Fatiha" Style="{StaticResource PhoneTextExtraLargeStyle}" HorizontalAlignment="Center"/>
                    </Border>
                    <TextBlock Text="At:" Margin="10,10,0,0"/>
                    <Border BorderBrush="Yellow" BorderThickness="4" Margin="15,10">
                        <TextBlock Name="CurrentAyaNumber" Text="Verse 15" Style="{StaticResource PhoneTextExtraLargeStyle}" HorizontalAlignment="Center"/>
                    </Border>
                    <Button x:Name="btnSetBookmark" Content="Set New Bookmark" Click="btnSetBookmark_Click" Margin="0,30,0,0" Height="120"/>
                    <Button x:Name="btnClearHistory" Content="Clear Bookmark History" Click="btnClearHistory_Click"/>
                </StackPanel>
            </controls:PanoramaItem>

            <controls:PanoramaItem Header="sura list">
                <ListBox Name="SuraListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Margin="0,0,0,10" Width="432">
                                <TextBlock Text="{Binding SuraArabicName}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                                <TextBlock Text="{Binding SuraEnglishName}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                                <TextBlock Text="{Binding NumberOfAyat, Converter={StaticResource stringConverter}, ConverterParameter='Verses/Ayat: {0}'}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </controls:PanoramaItem>

            <controls:PanoramaItem Header="history">
                <!--Double line list with image placeholder and text wrapping-->
                <StackPanel>
                    <ListBox Name="HistoryListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}" >
                        <ListBox.ItemTemplate>
                            <DataTemplate >
                                <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
                                    <StackPanel Width="311">
                                        <TextBlock Text="{Binding BookmarkDateTime}" TextWrapping="Wrap" Margin="12,0,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                                        <TextBlock Text="{Binding ArabicName}" TextWrapping="Wrap" Margin="12,-6,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                                        <TextBlock Text="{Binding AyaKey, Converter={StaticResource stringConverter}, ConverterParameter='Verse: {0}'}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                                    </StackPanel>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </StackPanel>
            </controls:PanoramaItem>

            <controls:PanoramaItem Header="about">
                <StackPanel >
                    <TextBlock Text="Developed by:" Margin="10,0,0,0"/>
                    <Border Margin="15,10">
                        <TextBlock Text="Bashar Lulu" Style="{StaticResource PhoneTextExtraLargeStyle}" HorizontalAlignment="Center"/>
                    </Border>
                    <TextBlock Text="Distributed by:" Margin="10,10,0,0"/>
                    <Border  Margin="15,10">
                        <TextBlock Text="Yalla Apps" Style="{StaticResource PhoneTextExtraLargeStyle}" HorizontalAlignment="Center"/>
                    </Border>
                    <TextBlock Text="Developer Contacts:" Margin="10,10,0,0"/>
                    <StackPanel Margin="10,10">
                        <TextBlock Text="bashar@basharlulu.net" FontSize="35" HorizontalAlignment="Center"/>
                        <TextBlock Text="@basharlulu" FontSize="35" HorizontalAlignment="Center"/>
                        <TextBlock Text="facebook.com/basharlulu" FontSize="35" HorizontalAlignment="Center"/>
                    </StackPanel>
                </StackPanel>
            </controls:PanoramaItem>
        </controls:Panorama>

    </Grid>
</phone:PhoneApplicationPage>